<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar
      title="财政百科"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs v-model="active" swipeable @click="clickTab">
    <!-- tab导航 -->
      <van-tab v-for="(item,index) in tabsList" :title='item.title ' :key="index" >
        <div id="search-box">
          <!-- 搜索框 -->
          <van-search
            v-model="value"
            show-action
            @search="onSearch"
          >
          <!-- 搜索按钮 -->
          <template #action>
            <van-button color="#00558e" size="small" @click="onSearch">搜索</van-button>
          </template>
          </van-search>
          <!-- 高级搜索 -->
          <div class="expand-button">
            <button @click="isActive = !isActive" :disabled="disabledBtn"><span>{{`高级\n查询`}}</span></button>
          </div>
          <div class="container" v-show="isActive">
            <collapse>
              <div >
                  <div class="search">
                    <!-- <input type="text">
                    <input type="text">
                    <van-button color="#00558e" size="small">确认</van-button>
                    <van-button icon="plus" size="small" type="info">添加条件</van-button> -->
                    <el-card class="box-card">
                      <Search></Search>
                    </el-card>
                  </div>
              </div>
            </collapse>
          </div>
        </div>
        <!-- 内容 {{ index }} -->
        <template v-if="list && list.length > 0">
          <van-list
            v-if="list && list.length > 0"
            v-model="loading"
            :immediate-check="false"
            finished-text="没有更多了"
            :finished="finished"
            :offset="10"
            class="list-box"
            @load="onLoad"
          >
            <div v-for="(item, index) in list" :key="index" class="list-card">
              <SubjectContent></SubjectContent>
            </div>
          </van-list>
        </template>
        <van-empty v-else image="error" description="暂无数据" />
      </van-tab>
    </van-tabs>
    
  </div>
</template>

<script>
import collapse from "../assets/js/collapse.js";

import Search from "./components/search.vue"
import SubjectContent from "./components/subjectContent.vue"

export default {
  components:{
    Search,collapse,SubjectContent
  },
  data() {
      return {
        active:0,
        tabsList:[
          {
            title:"全部",
            id:1
          },
          {
            title:"文件",
            id:2
          },
          {
            title:"政策",
            id:3
          },
          {
            title:"企业",
            id:4
          },
          {
            title:"部门",
            id:5
          },
          {
            title:"区划",
            id:6
          },
          {
            title:"站内查询",
            id:7
          }
        ],
        value: '',
        activeNames: ['1'],
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(2021, 0, 17), 
        isActive: false,
        list: [],
        loading: false,
        finished: false,
        refreshing: false,
        query: {
          pageSize: 10, // 分页大小
          pageNum: 1 // 页码
        },
        disabledBtn:true,
      }
    },
    created(){
      this.getlist()
    },
    methods: {
    //返回
      onClickLeft() {
        let arr = window.location.href.split("?")
        let url = arr[arr.length - 1]
        window.location.href = decodeURIComponent(url)
      },
      //回车/搜索按钮获取输入内容并获取对应数据
      onSearch(val) {
        console.log(val);
      },
      // 列表滚动
      onLoad() {
        this.query.pageNum++;
        this.getlist();
      },
      // 列表请求
      async getlist(){
        let params = {
          ...this.query
        }
        console.log(params,"参数")

        const res = await this.postList(params)
        this.list = this.list.concat(res)
        this.loading = false;

        console.log(this.list,111)
      },
      postList(params){
        return new Promise(resolve=>{
          let arr = []
          for (let i = 0; i < 10; i++) {
            arr.push(i);
          }
          if(this.list.length >= 20){
            arr = []
          }
          if(arr.length < 10){
            this.finished = true;
          }
          resolve(arr)
        })
      },
      //高级搜索判定
      clickTab(index){
        // 每次切换下拉菜单默认不展示
        this.disabledBtn = true
        // 控制高级搜索是否禁用
        if(index == 0 || index == 6){
          this.disabledBtn = true
          this.isActive = false
        }else{
          this.disabledBtn = false
          this.isActive = true
        }
        //获取对应类型数据
      }
    }
}
</script>

<style lang="scss">
.van-nav-bar{
  background:#3a74c5;
  
}
.van-icon {
  color: #fff !important;
  font-size: 24px;
}
.van-nav-bar__title{
  color: #fff !important;
  font-size: 20px;
}
.van-tab__text{
  font-size:19px;
  display:inline-block;
  padding: 0 6px;
}
.van-tabs__line{
  background:#00558e;
}
.van-field__left-icon {
  display: none;
}
.van-search__action{
  line-height: 0px;
  border-right: #b3b3b3 1px solid;
  padding-right: 16px;

}
.van-search{
  background: #eeeeee;
}
.van-button__text{
  font-size:16px;
}
.van-search__content{
  background:#fff;
}
#search-box{
  width: 100%;
  background: #eeeeee;
  padding: 4px 0;
  overflow:hidden;
}
.van-search{
  float: left;
  width: 80%;
}
.expand-button{
  width: 20%;
  float: right;
}
.expand-button button{
  border: 0px;
  height: 54px;
  padding-left:16px;
  font-size: 18px;
  color: #1d59ad;
}
/* .container{
  float: left;
  margin:10px;
  background:#fff;
} */
.search{
  padding: 10px;
}
.list-card{
  position: relative;
}
.list-card-row{
  padding: 8px 20px;
  float: left;
}
.list-div{
  border-bottom: 1px solid #ccc;
}
.list-card-row-col{
  margin: 4px 0;
}
.van-tag--plain::before{
  border:0px;
}
.el-card__body, .el-main{
  padding: 10px 20px 20px 20px !important;
}
.list-box{
  height: calc(100vh - 1rem - 34px);
  overflow: auto;
  padding-bottom: 10px;
}
</style>

